import React from 'react'
import ReactDOM from 'react-dom'

//props可以传任意类型，传函数都可以
class Child extends React.Component {
  state = {
    moneyName: 0,
    msg: '老爸辛苦了',
  }
  render() {
    return (
      <>
        <div>子组件</div>
        <h3>取走家里的钱：{this.props.money}</h3>
        <h3>z自己的钱：{this.state.moneyName}</h3>
        <button onClick={() => this.props.new(1)}>取走家里的钱</button>
        <button onClick={() => this.props.bb(this.state.msg)}>888</button>
      </>
    )
  }
}
class App extends React.Component {
  state = {
    money: 5000,
  }
  //负责消费的方法
  expenHandle = (value) => {
    this.setState({ money: this.state.money - value })
  }
  childHandle = (msg) => {
    console.log('接受子组件传来的值', msg)
  }
  render() {
    return (
      <>
        <h1>家里存款了多少钱：{this.state.money}</h1>
        <button onClick={() => this.setState({ money: this.state.money + 11111 })}>我打工赚了多少钱</button>
        <Child money={this.state.money} new={this.expenHandle} bb={this.childHandle} />
        <button onClick={() => this.expenHandle(1000)}>老妈消费家里的钱</button>
      </>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))
